<template>
    <el-dialog
        :title="titleMap[state.mode]"
        v-model="state.visible"
        :width="500"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="form"
            :rules="rules"
            :disabled="state.mode == 'show'"
            ref="dialogFormRef"
            label-width="100px"
        >
            <el-form-item label="排序值" prop="sort">
                <el-input v-model="form.sort" placeholder="数值越大越靠前" clearable></el-input>
            </el-form-item>
            <el-form-item label="地区名称" prop="name">
                <el-input v-model="form.name" placeholder="如：中国" clearable></el-input>
            </el-form-item>
            <el-form-item label="地区标示" prop="code">
                <el-input v-model="form.code" placeholder="如：zh-CN" clearable></el-input>
            </el-form-item>
            <el-form-item label="绑定语言ID" prop="langId">
                <el-select v-model="form.langId" placeholder="请绑定语言ID">
                    <el-option
                        v-for="item in state.langOptions"
                        :key="item.id"
                        :label="item.langName"
                        :value="item.id"
                    >
                        <span style="float: left">{{ item.id }}</span>
                        <span style="float: right; color: #8492a6; font-size: 12px">{{
                            item.langName + '（' + item.langFlag + '）'
                        }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="state.visible = false">取 消</el-button>
            <el-button
                v-if="state.mode != 'show'"
                type="primary"
                :loading="state.isSaving"
                @click="submit()"
                >保 存</el-button
            >
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import type { TitleMapModel } from '@/views/setting/role/type.ts'
import type { LangCountryModel } from '@/views/maintenance/langSetting/langCountry/type.ts'
import feedback from '@/utils/feedback.ts'
import { useI18n } from 'vue-i18n'
import maintenance from '@/api/modules/maintenance.ts'

const { t } = useI18n()

const emit = defineEmits(['success', 'closed'])

const dialogFormRef = ref()

const titleMap = reactive<TitleMapModel>({
    add: t('新增'),
    edit: t('编辑'),
    show: t('查看')
})

const form = reactive({
    id: '',
    name: '',
    code: '',
    isDelete: 0,
    sort: 1,
    langId: 0
})
const rules = reactive({
    name: [{ required: true, message: '请输入地区名称' }],
    code: [{ required: true, message: '请输入浏览器语言标识' }]
})

interface LangOptionsModel {
    langName: string
    langFlag: string
    id: number
}

const state = reactive({
    mode: 'add',
    visible: false,
    isSaving: false,
    // 所需数据选项
    groups: [],
    groupsProps: {
        value: 'id',
        emitPath: false,
        checkStrictly: true
    },
    langOptions: [] as LangOptionsModel[]
})

onMounted(() => {
    getLangOptions()
})

defineExpose({
    open,
    setData
})

// 获取语言列表
async function getLangOptions() {
    const res = await maintenance.lang.list.get({ page: 1, limit: 2000 })
    state.langOptions = res.data
}

// 显示
function open(mode = 'add') {
    state.mode = mode
    state.visible = true
}

// 表单提交方法
async function submit() {
    await dialogFormRef.value!.validate()

    state.isSaving = true
    const res = await maintenance.langCountry.edit.post(form, { await: 1 })
    state.isSaving = false
    if (res) {
        if (state.mode == 'add') {
            form.id = res
        }
        emit('success', form, state.mode)
        state.visible = false
        feedback.success('操作成功')
    }
}

// 表单注入数据
function setData(data: LangCountryModel) {
    Object.assign(form, data)
}
</script>

<style></style>
